<template>
  <div class="qckc">
    <div class="tx-heade">
      <el-form
        ref="form"
        :model="form"
        label-width="110px"
        style="margin: 10px 0 0 0;display:flex"
      >
        <el-form-item label="机构级别" style="width:280px">
          <el-select v-model="form.region" placeholder="总公司">
            <el-option label="总公司" value="shanghai"></el-option>
            <el-option label="分公司" value="beijing"></el-option>
            <el-option label="服务网点" value="beijing2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="所属公司" style="width:280px">
          <el-select v-model="form.region" placeholder="总公司">
            <el-option label="分公司1" value="shanghai"></el-option>
            <el-option label="分公司2" value="beijing"></el-option>
            <el-option label="分公司3" value="beijing2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="所属网点" style="width:280px">
          <el-select v-model="form.region" placeholder="总公司">
            <el-option label="网点1" value="shanghai"></el-option>
            <el-option label="网点2" value="beijing"></el-option>
            <el-option label="网点3" value="beijing2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>

     <el-tabs v-model="activeName" class = "content" >
    <el-tab-pane label="销售订单" name="first">
        <h3 style="  border-bottom:1px solid #bbb;">销售订单统计 </h3>
        <div class="con-content">
            <div class="con-left" style="margin:0 0 0 80px">
                <div style="height:60px;margin:0 0 20px 0">
                    <p style="line-height:30px;margin:0">累计订单数</p>
                    <h3 style="line-height:30px;margin:0">23,000</h3>
                </div>
                <div>
                    <p style="line-height:30px;margin:0">累计销售额</p>
                    <h3 style="line-height:30px;margin:0">4,235.000</h3>
                </div>
            </div>
            <div class="con-right">
                <div class="cr-top">
                     <el-tabs
                  v-model="activeName2"
                  type="card"
                  style="width: 260px"
                >
                  <el-tab-pane label="今日" name="day">
                       <div
                      id="myChart"
                      :style="{ width: '400px', height: '300px' }"
                    ></div>
                  </el-tab-pane>
                  <el-tab-pane label="本月" name="month">本月</el-tab-pane>
                  <el-tab-pane label="本年" name="year">本年</el-tab-pane>
                </el-tabs>
                </div>
            </div>
        </div>
    </el-tab-pane>
    <el-tab-pane label="服务订单" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="充值订单" name="third">角色管理</el-tab-pane>
  </el-tabs>

  <div class="ddgl">
      <h3 style="  border-bottom:1px solid #bbb;">订单管理 </h3>
         <el-tabs v-model="activeName3">
    <el-tab-pane label="销售订单" name="first3">
        <div class="tab-top">
            <el-input
    placeholder="请输入订单号/手机号/姓名/网点名称"
    prefix-icon="el-icon-search"
    style="margin: 15px 30px 0 0px; width: 300px; height: 40px"
    v-model="input21">
  </el-input>

   <el-form
        ref="form"
        :model="form"
        label-width="110px"
        style="margin: 10px 30px 0 0;display:flex"
      >
        <el-form-item label="订单状态：" style="width:280px">
          <el-select v-model="form.region" placeholder="全部">
            <el-option label="全部" value="shanghai"></el-option>
            <el-option label="待付款" value="beijing"></el-option>
            <el-option label="已付款" value="beijing2"></el-option>
            <el-option label="待派送" value="shanghai"></el-option>
            <el-option label="派送中" value="beijing"></el-option>
            <el-option label="已完成" value="beijing2"></el-option>
            <el-option label="已取消" value="beijing2"></el-option>
          </el-select>
        </el-form-item>
   </el-form>

    <el-button type="primary" style="width:120px;height:40px;margin-top:10px">搜索</el-button>
        </div>

        <el-table
            :data="tableData2"
            style="width: 100%"
           
            :default-sort="{ prop: 'date', order: 'descending' }"
          >
            <el-table-column label="商品信息" width="360">
              <template slot-scope="scope"  >
                <p style="margin:0">{{scope.row.item && scope.row.item.bianhao }}</p>
                <div style="display:flex;">
                  <img style="width:80px;height:60px" :src="scope.row.item && scope.row.item.img" alt="">
                  <p style="line-height:80px;margin:0">{{scope.row.item && scope.row.item.shop }}</p>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="danjia" label="单价" >
            </el-table-column>
            <el-table-column prop="date" label="数量"  width="220">
            </el-table-column>
            <el-table-column prop="address" label="收货信息" >
            </el-table-column>
            <el-table-column prop="name" label="价格"  width="180">
            </el-table-column>
             <el-table-column prop="zhuangtai" label="回桶"  width="180">
            </el-table-column>
             <el-table-column prop="zhuangtai" label="配送员"  width="180">
            </el-table-column>
             <el-table-column prop="zhuangtai" label="订单状态"  width="180">
            </el-table-column>
            <el-table-column label="操作" width="100" >
              <template >
                <div>
                   <el-button
                  @click="handleClick()"
                  type="text"
                  size="small"
                  >订单详情
                  </el-button>
                </div>
               <div>
                 <el-button type="text" size="small" style="margin-left: 0" >取消订单</el-button>
               </div>
                <div>
                  <el-button type="text" size="small" style="margin-left: 0" @click="dialogVisible2 = true">指定配送</el-button>
                </div>
                <div>
                  <el-button type="text" size="small" style="margin-left: 0"  @click="dialogVisible = true">改派订单</el-button>
                </div>
                <div>
                  <el-button type="text" size="small" style="margin-left: 0" @click="dialogVisible3 = true">确认送达</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>

          <div class="fenye">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        >
        </el-pagination>
      </div>
    </el-tab-pane>
    <el-tab-pane label="服务订单" name="second3">服务订单</el-tab-pane>
    <el-tab-pane label="充值订单" name="third3">充值订单</el-tab-pane>
  </el-tabs>
  </div>

      <el-dialog
        title="改派订单"
        :visible.sync="dialogVisible"
        width="45%"
      >
        <div class="pop2" style="height: 160px">
          <header>
            <h3 style="margin:0 0 10px 40px">已分配至：刘德华</h3>
            <el-form
        ref="form"
        :model="form"
        label-width="110px"
        style="margin: 10px 0 0 0;display:flex"
      >
        <el-form-item label=" 改派至: " required style="width:280px">
          <el-select v-model="form.region" placeholder="张三">
            <el-option label="张三" value="shanghai"></el-option>
            <el-option label="李四" value="beijing"></el-option>
            <el-option label="王五" value="beijing2"></el-option>
          </el-select>
        </el-form-item>
            </el-form>
          </header>
        </div>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
      </el-dialog>

        <el-dialog
        title="指定配送"
        :visible.sync="dialogVisible2"
        width="45%"
      >
        <div class="pop2" style="height: 160px">
          <header>
            <h3 style="margin:0 0 10px 40px">已分配至：刘德华</h3>
            <el-form
        ref="form"
        :model="form"
        label-width="110px"
        style="margin: 10px 0 0 0;display:flex"
      >
        <el-form-item label=" 改派至: " required style="width:280px">
          <el-select v-model="form.region" placeholder="张三">
            <el-option label="张三" value="shanghai"></el-option>
            <el-option label="李四" value="beijing"></el-option>
            <el-option label="王五" value="beijing2"></el-option>
          </el-select>
        </el-form-item>
            </el-form>
          </header>
        </div>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible2 = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
  </span>
      </el-dialog>

      <el-dialog
        title="确认送达"
        :visible.sync="dialogVisible3"
        width="45%"
      >
        <div class="pop3" style="height: 800px">
          <header>
            <div class="head" style="border-bottom:1px solid #bbb">
              <p>送桶信息</p>
              <p>总送桶 4 /桶</p>
            </div>
            
            <el-table
            :data="tableData3"
            style="width: 100%"
           
            :default-sort="{ prop: 'date', order: 'descending' }"
          >
            <el-table-column label="桶商品" >
              <template slot-scope="scope"  >
                <p style="margin:0">{{scope.row.item && scope.row.item.bianhao }}</p>
                <div style="display:flex;">
                  <img style="width:80px;height:60px" :src="scope.row.item && scope.row.item.img" alt="">
                  <p style="line-height:80px;margin:0">{{scope.row.item && scope.row.item.shop }}</p>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="danjia" label="送桶数" >
            </el-table-column>
          </el-table>

          <p style="border-bottom:1px solid #bbb">选择回桶</p>
          <el-table
            :data="tableData3"
            style="width: 100%"
           
            :default-sort="{ prop: 'date', order: 'descending' }"
          >
            <el-table-column label="桶商品" width="360">
              <template slot-scope="scope"  >
                <p style="margin:0">{{scope.row.item && scope.row.item.bianhao }}</p>
                <div style="display:flex;">
                  <img style="width:80px;height:60px" :src="scope.row.item && scope.row.item.img" alt="">
                  <p style="line-height:80px;margin:0">{{scope.row.item && scope.row.item.shop }}</p>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="danjia" label="押金标准" >
            </el-table-column>
            <el-table-column prop="danjia" label="押桶数" >
            </el-table-column>
            <el-table-column prop="danjia" label="回桶数" >
                <el-input v-model="input" placeholder="不大于押桶数"></el-input>
            </el-table-column>
          </el-table>

          <el-form
        ref="form"
        :model="form"
        label-width="110px"
        style="margin: 10px 0 0 0;display:flex"
      >
        <el-form-item label=" 应补收押金: "  style="width:280px">
          <el-input v-model="input" placeholder="0/元"></el-input>
        </el-form-item>
            </el-form>

            <p>注意：后台回桶，产生的应收押金仅起到统计作用，无法使用在线支付，请谨慎操作！</p>
          </header>
        </div>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible3 = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible3 = false">确 定</el-button>
  </span>
      </el-dialog>


  </div>
</template>

<script>
export default {
  data() {
    return {
       dialogVisible: false,
       dialogVisible2: false,
       dialogVisible3: false,
        activeName: 'first',
        activeName2:"day",
        activeName3:"first3",
        input21:"",
        input:"",
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
       tableData2: [
        {
          date: "02",
          name: "2020-09-26 18:30:01",
          address: "10",
          danjia: 239,
          zhuangtai:"已上架",
          item:{
            bianhao:'商品编号：1232312312222222222',
            img:"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
            shop:'XXXXXXXxxxxxxx商品…'
          }
        },
        {
          date: "04",
          name: "2020-09-26 18:30:02",
          address: "20",
          danjia: 238,
          zhuangtai:"已上架",
          item:{
            bianhao:'商品编号：1232312312222222222',
            img:"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
            shop:'XXXXXXXxxxxxxx商品…'
          }
        },
        {
          date: "01",
          name: "2020-09-26 18:30:03",
          address: "30",
          danjia: 237,
          zhuangtai:"已上架",
          item:{
            bianhao:'商品编号：1232312312222222222',
            img:"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
            shop:'XXXXXXXxxxxxxx商品…'
          }
        },
        {
          date: "03",
          name: "2020-09-26 18:30:04",
          address: "40",
          danjia: 236,
          zhuangtai:"已上架",
          item:{
            bianhao:'商品编号：1232312312222222222',
            img:"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
            shop:'XXXXXXXxxxxxxx商品…'
          }
        },
      ],
       tableData3: [
        {
          danjia: 239,
          item:{
            bianhao:'商品编号：1232312312222222222',
            img:"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
            shop:'XXXXXXXxxxxxxx商品…'
          }
        },
        {
          danjia: 238,
          item:{
            bianhao:'商品编号：1232312312222222222',
            img:"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
            shop:'XXXXXXXxxxxxxx商品…'
          }
        },
       
      ],

    };
  },
    mounted() {
    this.drawLine();
  },
  methods: {
      drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: { text: "押桶统计图" },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      });
    },
    handleClick(){
      this.$router.push({path:"/dingdan/detail"})
    },

  },
};
</script>

<style lang="scss" scoped>
.qckc {
  width: 98%;
  overflow: hidden;
  margin: 1%;
  


  .tx-heade {
    width: 100%;
    height: 60px;
    overflow: hidden;
    background-color: #fff;
    margin-bottom: 20px;
  }

  .content{
      padding: 1% 2%;
      overflow: hidden;
      background-color: #fff;
      margin-bottom: 20px;
      .con-content{
          display: flex;
          height: 360px;
          .con-left{
              width: 30%;
          }
          .con-right{
              .cr-top{
                  height: 60px;
              }
          }
      }
  }

  .ddgl{
      padding: 1% 2%;
      overflow: hidden;
      background-color: #fff;
      .tab-top{
          display: flex;
      }

      .fenye {
      width: 100%;
      padding: 80px 0 30px 0;
      .el-pagination,
      .is-background {
        float: right;
        margin-right: 10%;
      }
    }
  }

  .pop3{
    overflow: hidden;
    header{
      .head{
        display: flex;
        justify-content: space-between;
      }
    }
  }

}
</style>